<template>
  <div style="margin-top: 2px;overflow: hidden">
    <div class="hours-container">
      <div v-for="(item, index) in hours" :key="index" class="hours-item">
        <div class="hours-item-header">
          <span v-show="index % 3 === 0 && index !== 24&& index !== 0">{{ timeHours[index] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {

  },
  watch: {

  },
  computed: {
  },
  data () {
    return {
      hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
      //timeHours: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],// 选项
      timeHours: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],// 选项
      timeRangeList: [],// 选择的时间段
      timeRangeListIndex: [0],// 选中的下标
      timeRangeListIndexText: [],// 选中的下标文本
      tempRangeIndex: [],// 预选下标
    }
  },
  mounted () {

  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
.hours-container {
  margin-left: 0.7%;
  display: flex;
  .hours-item {
    width: 4%;
    height: 20px;
    border-right: none;
    text-align: center;
    &:last-child {
      .hours-item-value {
        display: none;
      }
      .hours-item-header {
        border-top: none;
        margin-left: -10px;
        //margin-left: -25px;
        font-size: 12px;
      }
    }

    .hours-item-header {
      text-align: left;
      position: relative;
      width: 100%;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
    }
  }
}
</style>
